@import "core/base";

.swiper-flash {
  height: 375px;
  .van-swipe-item {
    height: 375px;

    .img {
      @include wh(100%, 100%)
    }
  }
}

.swiper-flash1{
  height: 450px;
  position: relative;
  background: #F4F4F4;
  .van-swipe-item {
    height: 450px;

    .img {
      @include wh(100%, 100%);
      display: flex;
      justify-content: center;
      align-items: center;

    }
  }

}

.muber-min-tps{
  @include wh(auto,30px,30px);
  background:#F2F2F2;
  border-radius:15px;
  color: #686868;
  padding: 0 15px;
  font-size: 18px;
  z-index: 1;

  position: absolute;
  left: 10px;
  top: 410px;

}

.swiper-art {
  border-radius: 10px;
  margin-top: 30px;
  overflow: hidden;
  height: 300px;
  .van-swipe-item {
    height: 300px;

    .img {
      @include wh(100%, 100%)
    }
  }
}

.smoney {
  justify-content: space-between;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
  margin-top: 30px;

  &:after {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 0;
    content: '';
    vertical-align: top;
  }
  .flex-item {
    background: #EEF6FF;
    border-radius: 12px;
    @include wh(137px, 52px, 52px);
    color: #686868;
    font-size: 28px;
    display: inline-block;
    text-align: center;
  }
}

.inx-car {
  justify-content: space-between;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #C8C8C8;
  padding-bottom: 30px;

  &:after {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 0;
    content: '';
    vertical-align: top;
  }
  .flex-item {
    @include wh(140px, 35px, 35px);
    margin-top: 29px;
    font-size: 28px;
    overflow: hidden;
    display: inline-block;

    .logo {
      @include wh(35px, 35px);
      float: left;
      margin-right: 14px;
    }
  }
}

.inx-public-title {
  @include wh(100%, 40px, 40px);
  margin-top: 30px;
  .icon {
    height: 30px;
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }

  &.before{
    &:before{
      content: '';
      display: block;
      @include wh(8px,40px);
      margin-top: 7px;
      float: left;
      background: #1E77E0;
      margin-right: 34px;
    }
  }

  .text {
    font-size: 30px;
    font-weight: bold;
    float: left;

    &.no-bold{
      font-weight: inherit;
    }
  }

  .more {
    display: block;
    @include wh(auto, 54px, 54px);
    padding-left: 64px;
    font-size: 28px;
    background: url(../../assets/images/icon/more.svg) left center no-repeat;
    background-size: 47px auto;
    float: right;
  }
}

.inx-hr {
  @include wh(100%, auto);
  border: 1px solid #C8C8C8;
  margin-top: 30px;
}

/deep/ .list-cell {
  padding: 0;
  overflow: hidden;
  width: 100%;

  &.search-key{
    margin-top: 48px;
    .item{
      display: inline-block;
      @include wh(auto,52px,52px);
      padding: 0 26px;
      color: #686868;
      font-size: 28px;
      background: #F2F2F2;
      border-radius: 8px;
      margin-bottom: 12px;
      margin-right: 12px;
    }

    .item-list{
      @include wh(100%,84px,84px);
      border-bottom: 1px solid #C8C8C8;
      padding: 0;
      font-size: 30px;
      color: #686868;
    }

    &:after {
      margin-top: 37px;
    }

    &.no-after{
      &:after {
        display: none;
      }
    }
  }

  &:after {
    content: '';
    display: block;
    @include wh(100%, 2px);
    background: #C8C8C8;
  }

  &.no-border{
    &:after {
      display: none;
    }
  }

  .list-empty{
    @include wh(440px, 67px, 67px);
    border: 2px solid #C8C8C8;
    text-align: center;
    font-size: 28px;
    color: #C8C8C8;
    border-radius: 49px;
    margin: 100px auto;
  }

  .media-list{
    overflow: hidden;
    display: block;
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #C8C8C8;

    &:last-child{
      border: 0;
    }

    &.have{
      &:last-child{
        border-bottom: 2px solid #C8C8C8;
      }
    }

    .media-list-logo {
      @include wh(286px, 221px);
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #F4F4F4;

    }

    .media-list-body {
      @include wh(336px,221px);
      margin-left: 28px;
      flex: 1;
      display:flex;
      flex-flow: column;
      justify-content: space-between;

      .media-list-text-top {
        @include wh(100%, auto, 40px);
        font-size: 30px;
        overflow: hidden;
        max-height: 80px;
      }

      .media-list-text-tps {
        @include wh(100%, 35px, 35px);
        font-size: 26px;
        color: #A4A4A4;
        overflow: hidden;
      }

      .media-list-text-bottom {
        @include wh(100%,40px,40px);
        font-size: 30px;
        font-weight: bold;
        color: #EE6D6D;
        overflow: hidden;
      }

      .msg-num{
        height: 24px;
        overflow: hidden;

        .item{
          float: left;
          height: 24px;
          line-height: 30px;
          margin-right: 30px;
          font-size: 20px;
          color: #C8C8C8;
          overflow: hidden;

          &:before{
            content: '';
            float: left;
            display: inline-block;
            background-size: auto 24px;
            background-position: left center;
            background-repeat: no-repeat;
          }

          &.good{
            &:before{
              @include wh(24px,24px);
              margin-right: 2px;
              background-image: url("../../assets/images/icon/inx_good.svg");
            }

          }
          &.star{
            &:before{
              @include wh(26px,24px);
              margin-right: 5px;
              background-image: url("../../assets/images/icon/inx_star.svg");
            }
          }
          &.book{
            &:before{
              @include wh(23px,24px);
              margin-right: 5px;
              background-image: url("../../assets/images/icon/inx_edit.svg");
            }
          }
        }
      }
    }
  }

  .uni-media-list-body {
    height: 194px;
  }

  .uni-media-list-logo {
    @include wh(286px, 194px);
    border-radius: 10px;
    overflow: hidden;
  }

  .moeny {
    color: #EE6D6D;
    font-size: 30px;
  }
}

.list-cell {
  padding: 0;
  overflow: hidden;
  width: 100%;


  &.search-key{
    margin-top: 48px;
    .item{
      display: inline-block;
      @include wh(auto,52px,52px);
      padding: 0 26px;
      color: #686868;
      font-size: 28px;
      background: #F2F2F2;
      border-radius: 8px;
      margin-bottom: 12px;
      margin-right: 12px;
    }

    .item-list{
      @include wh(100%,84px,84px);
      border-bottom: 1px solid #C8C8C8;
      padding: 0;
      font-size: 30px;
      color: #686868;
    }

    &:after {
      margin-top: 37px;
    }

    &.no-after{
      &:after {
        display: none;
      }
    }
  }

  &:after {
    content: '';
    display: block;
    @include wh(100%, 2px);
    background: #C8C8C8;
  }

  &.no-border{
    &:after {
      display: none;
    }
  }

  .list-empty{
    @include wh(440px, 67px, 67px);
    border: 2px solid #C8C8C8;
    text-align: center;
    font-size: 28px;
    color: #C8C8C8;
    border-radius: 49px;
    margin: 100px auto;
  }

  .media-list{
    overflow: hidden;
    display: block;
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #C8C8C8;

    &:last-child{
      border: 0;
    }

    &.have{
      &:last-child{
        border-bottom: 2px solid #C8C8C8;
      }
    }

    .media-list-logo {
      @include wh(286px, 221px);
      border-radius: 10px;
      overflow: hidden;
      background: #F4F4F4;
    }

    .media-list-body {
      @include wh(336px,221px);
      margin-left: 28px;
      flex: 1;
      display:flex;
      flex-flow: column;
      justify-content: space-between;

      .media-list-text-top {
        @include wh(100%, auto, 40px);
        font-size: 30px;
        overflow: hidden;
        max-height: 80px;
      }

      .media-list-text-tps {
        @include wh(100%, 35px, 35px);
        font-size: 26px;
        color: #A4A4A4;
        overflow: hidden;
      }

      .media-list-text-bottom {
        @include wh(100%,40px,40px);
        font-size: 30px;
        font-weight: bold;
        color: #EE6D6D;
        overflow: hidden;
      }

      .msg-num{
        height: 24px;
        overflow: hidden;

        .item{
          float: left;
          height: 24px;
          line-height: 30px;
          margin-right: 30px;
          font-size: 20px;
          color: #C8C8C8;
          overflow: hidden;

          &:before{
            content: '';
            float: left;
            display: inline-block;
            background-size: auto 24px;
            background-position: left center;
            background-repeat: no-repeat;
          }

          &.good{
            &:before{
              @include wh(24px,24px);
              margin-right: 2px;
              background-image: url("../../assets/images/icon/inx_good.svg");
            }

          }
          &.star{
            &:before{
              @include wh(26px,24px);
              margin-right: 5px;
              background-image: url("../../assets/images/icon/inx_star.svg");
            }
          }
          &.book{
            &:before{
              @include wh(23px,24px);
              margin-right: 5px;
              background-image: url("../../assets/images/icon/inx_edit.svg");
            }
          }
        }
      }
    }
  }

  .uni-media-list-body {
    height: 194px;
  }

  .uni-media-list-logo {
    @include wh(286px, 194px);
    border-radius: 10px;
    overflow: hidden;
  }

  .moeny {
    color: #EE6D6D;
    font-size: 30px;
  }
}

.inx-service-box {
  @include wh(100%, 300px);
  margin-top: 30px;

  .img {
    @include wh(323px, 300px);
    border-radius: 10px;
    overflow: hidden;
  }
}

.search-box{
  @include wh(100%,126px);
  padding-left: 42px;
  background: #2C8DFF;
  overflow: hidden;

  .back{
    font-size:46px;
    color: #fff;
    margin-top: 45px;
  }

  .search{
   // width: 450px;
    background: #EEF6FF;
    margin-top: 16px;
    .van-icon{
      font-size: 40px;
      color: #C8C8C8;
      margin-top: 20px;
    }
    .search-btn{
      font-size: 28px;
      color: #fff;
      width: 166px;
    }
    input{
      @include wh(467px,66px,66px);

    }
  }
}

//买车
/deep/ .search-car-box{
  @include wh(100%,auto);
  overflow: hidden;
  padding-top: 19px;
  padding-bottom: 20px;

  justify-content: space-between;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;

  &:after {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 0;
    content: '';
    vertical-align: top;
  }

  &.no-just{
    justify-content:inherit;
    width: 106%;
  }

  .box-item{
    @include wh(156px,131px);
    text-align: center;
    margin: 18px 10px 0 10px;
    display: block;
    float: left;

    .img{
      @include wh(100%,67px);
    }

    .tit{
      @include wh(100%,61px,61px);
      border-radius: 8px;
      font-size: 28px;
      margin-top: 3px;
    }

    &.active{
      .tit{
        background: #E0EEFF;
      }
    }
  }

  .color-item{
    @include wh(195px,61px,61px);
    border-radius: 8px;
    font-size: 28px;
    margin-bottom: 10px;

    .ico{
      display: block;
      @include wh(30px,30px);
      box-sizing: border-box;
      border-radius: 100%;
      border: 2px solid #686868;
      float: left;
      margin-left: 38px;
      margin-top: 16px;
      margin-right: 21px;

      &.black{background:#000}
      &.white{background:#fff}
      &.sgray{background:#C8C8C8}
      &.gray{background:#898989}
      &.red{background:#E31616}
      &.orange{background:#E45610}
      &.green{background:#5AAB2D}
      &.blue{background:#0E88D8}
      &.coffee{background:#6E310A}
      &.violet{background:#CB18B3}
      &.xb{background:#E9D6B5}
      &.dc{background:#E45610}
      &.yellow{background:#EFD313}
      &.other{background:#000}
    }

    &.active{
      background: #E0EEFF;
    }
  }

  .item-money{
    @include wh(auto,42px,39px);
    text-align: center;
    color: #686868;
    border:2px solid #A4A4A4;
    border-radius: 5px;
    font-size: 28px;
    margin-top: 22px;
    margin-right: 30px;
    padding: 0 18px;
    min-width: 150px;
    box-sizing: border-box;


    &.active{
      background: #2C8DFF;
      border-color: #1E77E0;
      color: #fff;
    }
  }

}

/deep/ .search-money-bar{
  margin-top: 35px;
  height: 8px;
}
/deep/ .search-money-bar-txt{
  @include wh(100%,37px,37px);
  margin-top: 30px;
  font-size: 28px;

  @include justify;

  .txt-item{
    @include wh(70px,37px,37px);

    &:last-child{
      text-align: right;
    }
  }
}

.buy-search-box{

  /deep/ .van-dropdown-menu__title{
    line-height: inherit;
    font-size: 14px;
  }

  /deep/ .van-dropdown-item__content{
    box-sizing: border-box;
    padding: 0 17px;
  }



  .search-money-hr{
    margin-top:30px;
  }

  .search-money-txt{
    @include wh(100%,37px,37px);
    text-align: center;
    color: #2C8DFF;
    font-size: 28px;
    margin-top:40px;

  }



  .search-btn{
    @include wh(220px,67px,67px);
    text-align: center;
    color: #fff;
    font-size:28px;
    border: 2px solid #1E77E0;
    background: #2C8DFF;
    border-radius: 49px;
    margin:45px auto;
  }



}

.search-down-box{
  @include wh(auto,auto);
  overflow: hidden;
  background: #F2F2F2;
  margin-top: 19px;
  padding: 0 42px 20px 42px;

  .item{
    @include wh(auto,42px,42px);
    background: #fff;
    border-radius: 5px;
    border: 1px solid #C8C8C8;
    color:#A4A4A4;
    font-size: 28px;
    float: left;
    margin-top: 20px;
    padding-left: 20px;
    margin-right: 20px;

    &:after{
      content: "\F042";
      display: inline-block;
      font:20px "vant-icon";
      float:right;
      margin: 9px 10px 0 10px;
    }

    &.reset{
      border: 0;
      background: none;
      color: #686868;
      padding-left: 0;

      &:before{
        content: "\F0AD";
        display: inline-block;
        font:20px "vant-icon";
        float:left;
        margin: 9px 10px 0 10px;
      }

      &:after{
        display: none;
      }
    }
  }
}

.ad-buy-box{
  @include wh(100%,300px);
  border-radius: 10px;
  overflow: hidden;
  background:#D8D8D8 ;
  margin-top:30px;

  &.m30{
    margin-top: 30px;
  }

  .van-swipe-item {
    height: 300px;

    .img {
      @include wh(100%, 100%)
    }
  }

  .img {
    @include wh(100%, 100%)
  }
}

/deep/ .search-car-tit{
  background: #F2F2F2;
  font-size: 28px;
  color:#A4A4A4;
  height: 60px;
  line-height: 60px;

  .tit{
    padding-left:27px;
    font-size: 18px;
  }
}
/deep/ .search-car-list{
  @include wh(100%,auto);
  border-bottom: 1px solid #C8C8C8;
  padding: 25px 27px;
  overflow: hidden;
  vertical-align: middle;
  display: table;
  box-sizing: border-box;
  span{
    display: table-cell;
    width: 50px;

    &.car{
      width: 117px;
    }
  }
  .img{
    @include wh(50px,50px);
    margin-right: 27px;
    vertical-align: middle;
  }
  .img-car{
    @include wh(117px,50px);
    margin-right: 27px;
  }
  .tit{
    font-size: 28px;
    line-height: 32px;
    padding-right: 82px;

    .item-sea{
      display: inline-block;
      margin-right: 10px;

      &.active{
        color: #2C8DFF;
      }
    }
  }

  &.active{
    color: #2C8DFF;
  }
}

.search-car-bg{
  background: #2C8DFF;
}


/deep/ .search-car-brand-box{
  width: 100%; position: relative; overflow: hidden; overflow-y: auto;

  .box-popup-box{
    position: fixed;
    height: 1160px;
    overflow: hidden;
    overflow-y: auto;
    top: 160px;
    padding-bottom: 50px;
    right:0;
    background: #fff;
    width: 0%;
    @include transition(.3s);
    border-left: 1px solid #C8C8C8;
    -webkit-overflow-scrolling : touch;
  }
}

/deep/ .sea-tit{
  @include wh(100%,40px,40px);
  box-sizing: border-box;
  border-left: 8px solid #1E77E0;
  font-size: 28px;
  font-weight: bold;
  margin-top: 29px;
  padding-left: 34px;
  padding-right: 44px;

  .smll{
    font-size: 18px;
  }

  .tit-right{
    color:#2C8DFF;
    font-weight: normal;
  }
}

/deep/ .btn-box{
  @include wh(100%,90px);
  margin-top: 70px;
}
/deep/ .btn-primary{
  width: 100%;
  background: #2C8DFF;
  color: #fff;
  font-size: 28px;
  height: 90px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}

.share-box{
  @include wh(100%,32px);
  position: absolute;
  left: 0;
  box-sizing: border-box;
  top:66px;
  z-index: 9;
  color: #fff;
  font-size: 50px;
  padding: 0 35px;
}

.detail-title-min{
  @include wh(100%,53px);
  margin-top: 30px;

  .min-money{
    @include wh(auto,53px,53px);
    color: #2C8DFF;

    .money-price{
      font-size:42px;
      font-family:Helvetica-Condensed-Bold,Helvetica-Condensed;
      font-weight:bold;
    }
    .money-unite{
      font-size:28px;
    }
  }

  .min-tps{
    @include wh(auto,30px,30px);
    background:#F2F2F2;
    border-radius:15px;
    margin-left: 20px;
    color: #686868;
    padding: 0 15px;
    font-size: 18px;
    margin-top: 17px;
  }
}
.detail-title{
  @include wh(100%,auto,47px);
  font-size:36px;
  font-weight: bold;
  margin-top: 10px;
}

.detail-m-box-box{
  @include wh(100%,82px);
  position: relative;
  &:before{
    content: "";
    @include wh(26px,21px);
    position: absolute;
    background: url("../../assets/images/icon/jian_orange.svg");
    background-size: 100% 100%;
    left:128px;
    top: -19px;
  }

  .detail-m-box{
    @include wh(100%,82px);
    border-radius:41px;
    border: 2px solid #FF8C4C;
    background: #FFF9F3;
    margin-top: 30px;
    overflow: hidden;

    .box-zx{
      @include wh(auto,82px,82px);
      color:#F7915A ;
      font-size: 24px;
      padding-left: 54px;
      background: url("../../assets/images/icon/money.svg") left 20px center no-repeat;
      background-size: 26px 26px;
      float: left;
    }

    .hr{
      @include wh(15px,41px);
      margin-right: 15px;
      margin-top:20.5px;
      border-right: 2px solid #FFBA95;
      float: left;
    }

    .box-txt{
      @include wh(auto,82px,82px);
      float: left;

      &.m{
        margin-right: 15px;
      }

      .txt-tit{
        font-size: 24px;
        color: #686868;
      }
      .txt-num{
        font-size:28px;
        color: #F7915A;
      }

      .txt-uilt{
        font-size:18px;
        color: #F7915A;
      }
    }

    .box-phone{
      display: block;
      @include wh(85px,82px,82px);
      float: right;
      margin-right: 15px;

      .img{
        @include wh(85px,auto);
      }
    }
  }
}


.detail-top-box{
  overflow: hidden;
  @include wh(100%,auto);
  margin-top: 30px;
  margin-bottom: 30px;

  .item-list{
    @include wh(274px,77px,77px);
    overflow: hidden;
    font-size: 28px;
    float: left;
    margin-right: 71px;

    &:nth-child(even){
      margin-right: 0;
    }

    .t{
      color:#686868;
    }
  }

  .item{
    @include wh(33.33%,auto);
    float: left;

    .title{
      width: 100%;
      font-size: 28px;
      text-align: center;
    }

    .desc{
      font-size: 28px;
      color: #686868;
      text-align: center;
      margin-top: 10px;

      &.blue{
        font-weight: bold;
        color: #2C8DFF;
      }
    }
  }
}

.detail-public-title{
  @include wh(100%,37px,37px);
  font-weight: bold;
  font-size: 28px;
  margin-top:30px;

  .num{
    font-size: 18px;
    color: #C8C8C8;
  }
}

.other-tool-box{
  @include wh(100%,auto);
  overflow: hidden;
  margin-top: 30px;

  @include justify;

  .item{
    @include wh(auto,52px,52px);
    padding: 0 22px;
    background: #F2F2F2;
    margin-bottom: 11px;
    margin-right: 11px;
    border-radius: 26px;
    font-size: 28px;
    border:2px solid #686868;
    color: #686868;
    float: left;
    box-sizing: border-box;
  }
}

.detail-more-btn{
  display: block;
  @include wh(342px,67px,72px);
  overflow: hidden;
  text-align: center;
  border-radius: 49px;
  border: 2px solid #C8C8C8;
  font-size: 28px;
  margin: 30px auto 0 auto;
}

.detail-content{
  @include wh(100%,auto,51px);
  font-size: 28px;
  overflow: hidden;
  text-indent: 2em;
  margin-top: 15px;

  &.no-em{
    text-indent: 0;
  }
}

.detail-map-box{
  @include wh(100%,auto);
  overflow: hidden;
  display: flex;
  align-items:center;
  margin-bottom: 5px;
  border: 2px solid #C8C8C8;
  //padding: 10px;
  box-sizing: border-box;

  .map-box-left{
    @include wh(85%,250px)
  }

  .map-btn{
    @include wh(12.5%,200px);
    margin-left: 2.5%;
    overflow: hidden;
    color: #2C8DFF;
    text-align: center;
    border-left: 2px solid #C8C8C8;
    font-size: 28px;
    overflow: hidden;
    background: url("../../assets/images/icon/dh.svg") center top 26px no-repeat;
    background-size: auto 50px;
    padding-top: 80px;
    box-sizing: border-box;
  }

}

.detail-user-box{
  @include wh(100%,110px);
  margin-top:30px;
  overflow: hidden;

  .img{
    @include wh(110px,110px);
    border-radius: 100%;
    overflow: hidden;
    float: left;
    margin-right: 24px;
  }

  .box-title{
    float: left;
    width: 50%;
    margin-top: 18px;
    .t1{
      font-size:28px;
      font-weight: bold;
    }
    .t2{
      font-size: 18px;
    }
  }

  .box-tps{
    float: left;
    width: 50%;
    margin-top: 11px;
    color: #686868;

    .sp{
      margin-right:21px;
    }
  }
}

.detail-danger-box{
  @include wh(100%,70px);
  overflow: hidden;
  background: #F2F2F2;
  margin-top: 38px;

  .box-left{
    @include wh(566px,70px);
    color: #C8C8C8;
    font-size: 18px;
    text-align: center;
    line-height: 24px;
    padding-top: 13px;
    border-right: 2px solid #fff;
  }

  .box-right{
    @include wh(98px,70px);
    text-align: center;
    color: #2C8DFF;
    font-size: 18px;
    padding-top: 10px;

    .ico{
      font-size: 32px;
      margin-bottom: -20px;
    }
    .tt{
      margin-top: -10px;
    }
  }
}

/deep/ .detail-msg-list{
  @include wh(100%,auto);
  padding-bottom: 29px;
  border-bottom: 1px solid #C8C8C8;
  margin-top: 30px;
  overflow: hidden;

  .list-head{
    display: block;
    @include wh(60px,60px);
    border-radius: 100%;
    overflow: hidden;
  }

  .list-right{
    @include wh(580px,auto);
    overflow: hidden;

    .list-header{
      @include wh(100%,37px,37px);
      overflow: hidden;

      .name{
        color:#2C8DFF;
        font-size: 28px;
      }

      .good-num{
        background: url("../../assets/images/icon/good.svg") right 1px center no-repeat;
        background-size:auto 28px;
        padding-right: 40px;
        height: 37px;
        line-height: 42px;
        color:#A4A4A4;
        font-size: 28px;
      }
    }

    .list-tps{
      @include wh(100%,24px,24px);
      margin-top: 4px;
      font-size: 18px;
      color:#C8C8C8;
      margin-bottom: 30px;
    }

    .list-content{
      color: #686868;
      font-size: 28px;
      line-height: 37px;
      margin-top:30px;
    }

    .list-hh{
      @include wh(100%,26px,26px);
      font-size: 24px;
      color: #1E77E0;
      margin-top: 20px;
    }

    .list-floor{
      overflow: hidden;
      background: #F2F2F2;
      padding:5px;
      border: 1px solid #C8C8C8;


      .floor-list{
        @include wh(auto,auto);
        overflow: hidden;
        margin-top: 25px;
        padding:0 15px;

        .floor-list-header{
          @include wh(100%,37px,37px);
          font-size: 28px;
          color: #2c8dff;
        }
        .floor-list-tps{
          font-size: 20px;
          color: #C8C8C8;
          @include wh(100%,24px,24px);
          margin-top: 4px;
          position: relative;

          .floor-good-num{
            background: url("../../assets/images/icon/good.svg") right 1px center no-repeat;
            background-size:auto 28px;
            padding-right: 40px;
            height: 37px;
            line-height: 42px;
            color:#A4A4A4;
            font-size: 28px;
            position: absolute;
            right: 0;
            bottom:5px;
          }
        }
        .floor-list-content{
          @include wh(100%,auto,37px);
          margin-top: 13px;
          color: #686868;
          font-size: 28px;
          text-align: justify;
          text-justify: inter-ideograph;
        }
      }
    }
  }


}

.detail-footer-box{
  @include wh(100%,90px);

  .d-footer{
    @include wh(100%,90px);
    background: #fff;
    box-shadow:0px -1px 10px 0px rgba(146,143,143,0.5);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;

    .footer-left{
      @include wh(382px,90px);
      float: left;

      .item{
        display: block;
        @include wh(25%,90px);
        float: left;
        text-align: center;
        font-size: 18px;
        padding-top: 15px;

        .img{
          height: 30px;
          margin-bottom: 1px;
        }
      }
    }
    .footer-btn{
      display: block;
      @include wh(368px,90px,90px);
      background:#2C8DFF ;
      color: #fff;
      font-size: 28px;
      text-align: center;
      float: left;
    }
  }
}

/deep/ .tool-title{
  .van-collapse-item__content{
    padding: 0 16px;
  }
  .van-cell{
    background: #f2f2f2;
  }

  .item-list{
    @include wh(100%,97px,97px);
    font-size: 28px;
    border-bottom: 1px solid #C8C8C8;

    .list-tit{
      color:#686868;
    }
    .list-txt{
      color: #2C2C2C;
    }
  }
}

.msg-title{
  @include wh(100%,97px,97px);
  position: relative;
  font-size: 28px;
  font-weight: bold;
  text-align: center;

  .close{
    color:#2C8DFF;
    position: absolute;
    top: 0;
    font-weight: normal;
    right:42px
  }
}
.rel-public-tps-box{
  @include wh(100%,37px,37px);
  padding: 0 42px;
  box-sizing: border-box;
  color: #686868;
  margin-top: 30px;
  font-size: 28px;
}
.rel-public-hr{
  @include wh(100%,30px);
  border-bottom: 1px solid #C8C8C8;
}
.msgContent{
  background: #F2F2F2;
  border-radius: 8px;
  margin: 0 42px;
  width: 666px;
  height: 420px;
  border: 1px solid #A4A4A4;
  color: #686868;

  &.m{
    margin-top: 23px;
  }

  .van-field__body{
    .van-field__control{
      height: 230px;
    }
  }
}
.msg-btn-primary{
  width: 100%;
  font-size: 28px;
  height: 90px;
  background: #2C8DFF;
  color: #fff;
  margin-top: 60px;

  &.m{
    margin-top: 40px;
    background: #F2F2F2;
    color: #686868;
    height: 70px;
    line-height: 70px;
  }
}

.media-pk-list{
  overflow: hidden;
  display: block;
  margin-top: 45px;
  padding-bottom: 45px;
  border-bottom: 2px solid #C8C8C8;

  &:last-child{
    border: 0;
  }

  .media-list-logo {
    @include wh(199px, 194px);
    border-radius: 10px;
    overflow: hidden;
    background: #F4F4F4;
  }

  .media-list-body {
    @include wh(336px);
    margin-left: 28px;

    .media-list-text-top {
      @include wh(100%, 80px, 40px);
      font-size: 30px;
      overflow: hidden;
    }

    .media-list-text-tps {
      @include wh(100%, 35px, 35px);
      font-size: 26px;
      color: #A4A4A4;
      margin-top: 17px;
      overflow: hidden;
    }

    .media-list-text-bottom {
      @include wh(100%,40px,40px);
      font-size: 30px;
      font-weight: bold;
      color: #EE6D6D;
      margin-top: 22px;
      overflow: hidden;
    }
  }
}

.pk-box{
  @include wh(auto,98px);
  border-bottom: 1px solid #C8C8C8;
  margin: 0 42px;

  .item{
    @include wh(50%,98px,98px);
    box-sizing: border-box;
    border-right: 1px solid #C8C8C8;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #C8C8C8;

    &.active{
        color: #2C2C2C;
    }

    &:last-child{
      border: 0;
    }
  }
}

.rel-public-box{
  margin: auto 42px;
  overflow: hidden;
}

.rel-form-box{
  @include wh(100%,auto);
  border-bottom: 2px solid #C8C8C8;
  padding-bottom: 20px;
  overflow: hidden;
}
.form-two-box{
  @include wh(100%,auto);
  overflow: hidden;

  &.three{
    .item{
      width: 33.3333%;
      padding:0 1px;
    }
  }

  .item{
    overflow: hidden;
    display: inline-block;
    @include wh(50%,auto);
    float: left;
    border-right: 2px solid #C8C8C8;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 0 20px;

    &:last-child{
      border: 0;
    }

    .rel-form-title{
      margin-top:11px;
    }
    .rel-form-input{
      border: 0;
    }
  }
}
.rel-form-title{
  @include wh(100%,37px,37px);
  text-align: center;
  font-size: 28px;
  color: #686868;
  margin-top: 30px;
}
.rel-form-input{
  @include wh(100%,auto,37px);
  padding-top: 20px;
  font-size: 28px;
  color: #A4A4A4;
  text-align: center;
  border: 0;
  background: #fff;

  &.active{
    font-weight: bold;
    color: #2C2C2C;
  }
}
.rel-form-bottom-tps{
  color: #D50E0E;
  font-size: 18px;
  text-align: center;
  margin-top: 10px;
}

.rel-public-title{
  @include wh(100%,100px,100px);
  background: #F2F2F2;
  margin-top: 10px;
  font-size: 28px;

  &:after{
    content: '';
    display: block;
    float: left;
    @include wh(8px,40px);
    background: #1E77E0;
    margin-top:30px;
    margin-right: 34px;
  }

  .txt{
    font-weight: bold;
  }
  .tps{
    font-size: 18px;
    color: #D50E0E;

    &.no{
      color: #686868;
    }
  }
}

.rel-min-title{
  @include wh(100%,37px,37px);
  margin-top:29px;
  text-align: center;
  font-size: 28px;
  color:#686868 ;
}
.rel-box{
  @include wh(auto,auto);
  overflow: hidden;
  margin-top: 30px;
  padding: 0 42px;

  @include justify;

  .item{
    @include wh(auto,42px,42px);
    border-radius: 5px;
    border: 2px solid #A4A4A4;
    font-size: 28px;
    color: #686868;
    margin-bottom: 24px;
    padding: 0 20px;

    &.active{
      background:#2C8DFF;
      border-color: #1E77E0;
      color: #fff;
    }
  }
}
.rel-img-box{
  padding: 0 40px;
  margin-top: 25px;

  &:after{
    display:block;clear:both;content:"";visibility:hidden;height:0
  }

  .rel-img-box-tit{
    color:#2C8DFF;
    height: 160px;
    display: flex;
    align-items: center;
    margin-right: 22px;
    margin-left: 22px;
  }

  .rel-img-box-img{
    height: 160px;
    text-align: center;
    font-size: 20px;
    color:#686868;
    margin-top: 2px;

    .img{
      width: 193px;
      overflow: hidden;
      border-radius: 8px;
    }
  }
}

/deep/ .svr-content{
  @include wh(auto,auto,41px);
  overflow: hidden;
  padding: 10px;
  font-size: 28px;

  p{
    padding: 0;
    margin: 0;
  }

  img{
    width: 100%;
  }

  .con-title{
    @include wh(100%,auto,37px);
    font-weight: bold;
    text-align: center;
    font-size: 28px;
  }
  .con-tps{
    color:#686868 ;
    font-size: 18px;
    margin-top: 20px;
    text-align: center;

    .ml{
      margin-left: 102px;
    }
  }
  .con-number{
    font-size: 18px;
    color: #A4A4A4;
    text-align: right;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /deep/ .con-content{
    @include wh(100%,auto,41px);
    overflow: hidden;

    img{
      width: 100%;
      height: auto;
    }
  }
}

.svr-bottom-box{
  @include wh(100%,90px);

  .svr-bottom{
    @include wh(100%,90px);
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 28px;

    .left-btn{
      @include wh(200px,90px,90px);
      color: #fff;
      display: block;
      padding-left: 60px;
      box-sizing: border-box;

      background:#A4CBF8 url("../../assets/images/icon/svr.svg") left 20px center no-repeat;
      background-size: auto 30px;
    }
    .right-btn{
      @include wh(200px,90px,90px);
      color: #fff;
      box-sizing: border-box;
      padding-left: 60px;
      background: #45a9ff url("../../assets/images/icon/tel.svg") left 20px center no-repeat;
      background-size: auto 30px;
      display: block;
    }
    .right-btn-sq{
      @include wh(350px,90px,90px);
      color: #fff;
      background:#2C8DFF;
      box-sizing: border-box;
      text-align: center;
      display: block;
    }
  }
}

.order-tps-box{
  @include wh(auto,auto,40px);
  font-size: 18px;
  color:#686868;
  padding: 42px;
  margin-top: 8px;

  .price-box{
    font-size: 28px;
    color: #2C8DFF;
  }
}

.order-btn-box{
  @include wh(100%,180px);

  .btn-box{
    @include wh(100%,180px);
    position: fixed;
    left: 0;
    bottom: 0;

    .order-btn{
      display: block;
      @include wh(440px,67px,67px);
      border-radius: 49px;
      border: 2px solid #87B1E1;
      background: #A4CBF8;
      font-size: 28px;
      color: rgba(255,255,255,.7);
      margin: 20px auto 0 auto;

      &.active{
        border-color: #1E77E0;
        background: #2C8DFF;
        color: #fff;
      }
    }

    .btn-box-tps{
      @include wh(100%,24px,24px);
      margin-top: 28px;
      color: #686868;
      text-align: center;
      padding-left: 90px;
    }
  }
}

.media-msg-list{
  overflow: hidden;
  display: block;
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 2px solid #C8C8C8;


  .media-list-logo {
    @include wh(200px, 154px);
    border-radius: 10px;
    overflow: hidden;
    background: #F4F4F4;
  }

  .media-list-body {
    @include wh(439px, 154px);
    margin-left: 24px;
    flex: 1;
    display:flex;
    flex-flow: column;
    justify-content: space-between;

    .media-list-text-top {
      @include wh(100%, auto, 37px);
      max-height: 74px;
      font-size: 30px;
      overflow: hidden;
    }

    .media-list-text-tps {
      @include wh(100%, 35px, 35px);
      font-size: 26px;
      color: #A4A4A4;
      overflow: hidden;
    }

    .media-list-text-bottom {
      @include wh(100%,40px,40px);
      font-size: 30px;
      font-weight: bold;
      color: #EE6D6D;
      overflow: hidden;
    }

    .msg-num{
      height: 24px;
      overflow: hidden;

      .item{
        float: left;
        height: 24px;
        line-height: 30px;
        margin-right: 30px;
        font-size: 20px;
        color: #C8C8C8;
        overflow: hidden;

        &:before{
          content: '';
          float: left;
          display: inline-block;
          background-size: auto 24px;
          background-position: left center;
          background-repeat: no-repeat;
        }

        &.good{
          &:before{
            @include wh(24px,24px);
            margin-right: 2px;
            background-image: url("../../assets/images/icon/inx_good.svg");
          }

        }
        &.star{
          &:before{
            @include wh(26px,24px);
            margin-right: 5px;
            background-image: url("../../assets/images/icon/inx_star.svg");
          }
        }
        &.book{
          &:before{
            @include wh(23px,24px);
            margin-right: 5px;
            background-image: url("../../assets/images/icon/inx_edit.svg");
          }
        }
      }
    }
  }
}

//对比详情
.pk-header{
  @include wh(100%,364px);
  background: #fff;
  position: fixed;
  left: 0;
  top:126px;
  border-bottom: 1px solid #C8C8C8;
  z-index: 1;

  .head-left{
    @include wh(221px,364px);
    float: left;
    overflow: hidden;

    .left-txt{
      font-size: 28px;
      padding-left: 42px;
      margin-top: 45px;
    }
    .left-switch{
      margin-left: 42px;
      margin-top: 10px;
    }

    .left-item{
      @include wh(100%,37px,37px);
      font-size: 28px;
      margin-top:25px;
      margin-bottom: 30px;
      padding-left: 42px;

      .mr{
        margin-right: 10px;
      }
      .mr1{
        margin-right: 20px;
      }
    }
  }

  .head-right{
    @include wh(529px,364px);
    float: right;
    overflow: hidden;
    padding-left: 5px;
    box-sizing: border-box;

    .right-item{
      @include wh(240px,auto);
      margin:28px 10px 0 10px;

      .item-img{
        @include wh(100%,168px);
        overflow: hidden;
        background: #D8D8D8;
      }

      .item-title{
        @include wh(100%,74px,37px);
        font-size: 28px;
        overflow: hidden;
        margin-top:20px;
      }

      .item-price{
        font-size:30px;
        color: #EE6D6D;
        margin-top: 10px;
      }
    }
  }
}

.pk-body{
  @include wh(100%,auto);
  overflow: hidden;
  margin-top: 364px;

  .body-left{
    @include wh(221px,auto);
    float: left;

    .left-item{
      @include wh(100%,96px);
      font-size: 24px;
      color: #686868;
      background: #F6FAFF;
      border-bottom: 1px solid #C8C8C8;
      position: relative;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: left;
      box-sizing: border-box;

      &.mt{
        margin-top: 100px;
      }
    }

    .left-title{
      @include wh(750px,100px,100px);
      background:#F2F2F2;
      font-weight: bold;
      font-size: 28px;
      padding-left: 42px;
      position: absolute;
      left: 0;
      top: -100px;
      text-align: left;
      color: #2C2C2C;

      &:after{
        content: '';
        display: block;
        @include wh(8px,40px);
        background: #1e77e0;
        position: absolute;
        left: 0;
        top:30px;
      }
    }
  }

  .body-right{
    @include wh(529px,auto);
    float: right;

    .right-item{
      @include wh(264px,auto);
      font-size: 24px;
      margin-left: -1px;

      &:first-child{
        margin-left: 0;
      }

      .item-left{
        @include wh(264px,96px);

        box-sizing: border-box;
        border:1px solid #C8C8C8;
        border-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;

        &.mt{
          margin-top: 100px;
        }
      }
    }
  }
}


.share{
  @include wh(750px,auto);
  background: #fff;
  overflow: hidden;

  .share-head{
    @include wh(100%,461px);
    background:#2C8DFF;
    border-radius: 0 0 90px 90px;
    padding-top: 60px;
    position: relative;

    .head-logo{
      padding-left: 41px;
      @include wh(auto,39px);

      .img{
        height: 39px;
        margin-right: 20px;
      }
    }

    .head-title{
      @include wh(auto,55px,55px);
      font-size: 42px;
      color: #fff;
      text-align: right;

      .img{
        height: 39px;
        padding-right: 41px;
      }
    }

    .head-img{
      @include wh(655px,435px);
      border: 5px solid #fff;
      position: absolute;
      left:43px;
      top:166px;
      display: flex;
      justify-content: center;
      align-items: center;

      .img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .share-moeny-box{
    @include wh(auto,55px,55px);
    margin-top: 108px;

    padding-left:47px;

    .price{
      color: #2C8DFF;
      font-size: 42px;
      font-weight: bold;
      float: left;

      .unit{
        font-size:18px;
      }
    }

    .box-old-price{
      float: left;
      border-radius: 22px;
      background: #F2F2F2;
      margin-left: 24px;
      padding: 0 18px;
      color: #686868;
      font-size: 18px;
      margin-top: 17px;
      @include wh(auto,32px,32px)
    }
  }

  .share-title{
    padding: 0 47px;
    line-height: 47px;
    font-size: 36px;
    font-weight: bold;
    margin-top:26px;
  }

  .detail-m-box-box{
    margin: 0 47px;
    box-sizing: border-box;
    width: auto;
  }

  .other-tool-box{
    padding: 0 47px;
    margin-top: 30px;
    width: auto;
  }

  .share-ewm{
    @include wh(auto,392px);
    background: url("../../assets/images/car/share_bg.png");
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;

    .img{
      @include wh(224px,224px);
      margin-top: 65px;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
    }

    #qrCodes img{
      @include wh(100%,100%)
    }

    .txt{
      font-size: 26px;
      color: #686868;
      margin-top:14px;
    }
  }
}

.share-wrapper{
  display: flex;
  //align-items: center;
  padding-top: 50px;
  justify-content: center;
  height: 100%;

  .img{
    @include wh(auto,73.5%)
  }
}

.share-bottom-box{
  @include wh(100%,auto);
  overflow: hidden;
  margin-top: 30px;

  .item{
    @include wh(150px,auto);
    float: left;
    margin: 0 20px;


    .item-img{
      @include wh(80px,80px);
      border-radius: 100%;
      overflow: hidden;
      margin: 0 auto 10px auto;

      &.down{
        background: #F4F4F4 url("../../assets/images/down.svg") center no-repeat;
        background-size: auto 40px;
      }

      &.weixin{
        background: #F4F4F4 url("../../assets/images/weixin.svg") center no-repeat;
        background-size: auto 40px;
      }

      &.frend{
        background: #F4F4F4 url("../../assets/images/frend.svg") center no-repeat;
        background-size: auto 40px;
      }
    }
    .item-title{
      @include wh(100%,auto);
      font-size: 26px;
      text-align: center;
      color: #686868;
    }
  }
}

/deep/ .fileDisabled{
  .van-uploader__upload{display: none}
}

.rel-x-box{
  .x-box{
    background: #fff;
    border: 43px solid #f4f4f4;
    padding: 42px 33px;
    box-sizing: border-box;
  }

  .box-title{
    @include wh(100%,37px,37px);
    font-size: 28px;
    font-weight: bold;

    &:before{
      content: '';
      @include wh(17px,17px);
      border-radius: 100%;
      background: #2C8DFF;
      display: inline-block;
      margin-right: 21px;
    }
  }

  .box-tps{
    @include wh(100%,auto,37px);
    color: #686868;
    margin-top: 42px;
    font-size: 28px;
  }

  .box-tps2{
    @include wh(100%,auto,37px);
    color: red;

  }

  .box-hr{
    @include wh(100%,42px);
    border-bottom:1px solid #C8C8C8;
    margin-bottom: 42px;
  }

  .box-update-box{
    @include wh(100%,371px);
    background: #E2F8FF;
    border-radius: 10px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .upImg{
      @include wh(453px,275px);

    }

    .van-uploader__preview-image{
      width: 100%;
      height: 3.66667rem;
    }
  }

  .box-ex-box{
    @include wh(100%,atuo);
    margin-top: 25px;
    margin-bottom: 15px;
  }
}

/deep/ .rel-x-box{
  .x-box{
    background: #fff;
    border: 43px solid #f4f4f4;
    padding: 42px 33px;
    box-sizing: border-box;
  }

  .box-title{
    @include wh(100%,37px,37px);
    font-size: 28px;
    font-weight: bold;

    &:before{
      content: '';
      @include wh(17px,17px);
      border-radius: 100%;
      background: #2C8DFF;
      display: inline-block;
      margin-right: 21px;
    }
  }

  .box-tps{
    @include wh(100%,auto,37px);
    color: #686868;
    margin-top: 42px;
    font-size: 28px;
  }

  .box-hr{
    @include wh(100%,42px);
    border-bottom:1px solid #C8C8C8;
    margin-bottom: 42px;
  }

  .box-update-box{
    @include wh(100%,371px);
    background: #E2F8FF;
    border-radius: 10px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .upImg{
      @include wh(453px,275px);

    }

    .van-uploader__preview-image{
      width: 100%;
      height: 3.66667rem;
    }
  }

  .box-ex-box{
    @include wh(100%,atuo);
  }
}
